// 散点图对象组件

var H5ComponentPoint = function(name, cfg) {
	var component = new H5ComponentBase(name, cfg);
	var base = cfg.data[0][1];  //以第一个数据的比例为大小的100%

	var centerTop = component.height()/2;
	var centerLeft = component.width()/2;
	
	$.each(cfg.data, function(index, item) {
		var point = $('<div class="point point_'+index+'">');
		var name = $('<div class="name">'+item[0]+'</div>');
		var rate = $('<div class="per">'+(item[1]*100)+"%"+'</div>');
		name.append(rate);
		point.append(name);
		var per = (item[1]/base*100) + '%';
		point.width(per)
			 .height(per)
			 .css("z-index", 1);
		if(item[2]) {
			point.css('background-color', item[2]);
		}
		if(item[3] !== undefined && item[4] !== undefined) {
			point.css({
				top: item[4],
				left: item[3]
			})
		}

		//设置第二个point开始居中且被第一个Point覆盖
		if(index > 0) {
			point.css({
				top: centerTop - point.height(),
				left: centerLeft - point.width(),
				'z-index': 0
			})
		}
		point.data('top', point.css('top')).data('left', point.css('left'));
		
		component.append(point);
	});

	//页面加载后point回到设置的位置
	var points = component.find('.point');	
	component.on('onLoad', function() {
		$.each(points, function(index, item) {
			console.log(item);
			if(index > 0) {
				setTimeout(function() {
					item.style.top = cfg.data[index][4];
					item.style.left = cfg.data[index][3];
				},500);
			}
		})
	});

	//页面离开后point重新回到中心点位置
	component.on('onLeave', function() {
		for(var i = 0; i < points.length; i++){
			point = component.find('.point_'+i);
			point.css({
				top: point.data('top'),
				left: point.data('left')
			})
		}
	});

	return component;
}